<script setup lang="ts">
	const orderTypes = [
		{ type: 1, text: '待付款', icon: 'icon-currency' },
		{ type: 2, text: '待发货', icon: 'icon-gift' },
		{ type: 3, text: '待收货', icon: 'icon-check' },
		{ type: 4, text: '待评价', icon: 'icon-comment' },
	]
</script>

<template>
	<!-- 我的订单 -->
	<view class="orders">
		<view class="title">
	    我的订单
			<navigator class="navigator" url="/pagesOrder/list/list?type=0" hover-class="none">
			  查看全部订单<text class="icon-right"></text>
			</navigator>
		</view>
		<view class="section">
	    <!-- 订单 -->
			<navigator
			  v-for="item in orderTypes"
			  :key="item.type"
			  :class="item.icon"
			  :url="`/pagesOrder/list/list?type=${item.type}`"
			  class="navigator"
			  hover-class="none"
			>
			{{ item.text }}
			</navigator>
			<!-- 客服 -->
			<button class="contact icon-handset" open-type="contact">售后</button>
		</view>
	</view>
</template>

<style lang="scss" scoped>
.orders {
	position: relative;
	z-index: 99;
	padding: 30rpx;
	margin: 32rpx 20rpx 0rpx;
	background-color: #fff;
	border-radius: 10rpx;
	box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.5);
	// border: #ff9545 solid 1rpx;
  .title {
	height: 40rpx;
	line-height: 40rpx;
	font-size: 28rpx;
	color: #1e1e1e;

	.navigator {
	  font-size: 24rpx;
	  color: #939393;
	  float: right;
	}
  }
  .section {
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 40rpx 20rpx 10rpx;
	.navigator 
	.contact {
	  text-align: center;
	  font-size: 24rpx;
	  color: #333;
	  &::before {
		display: block;
		font-size: 60rpx;
		color: #ff9545;
	  }
	}
	.contact {
	  padding: 0;
	  margin: 0;
	  border: 0;
	  background-color: transparent;
	  line-height: inherit;
	}
  }
}
</style>
